<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页布局-Tab面板</title>
  <style>
    .m-tabs-header{
      height: 40px;
      border: 1px solid #cccccc;
      display: flex;
      background: #eeeeee;
    }
    .m-tab-title{
      padding-left: 18px;
      padding-right: 18px;
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 14px;
      border-right: 1px solid #cccccc;
      cursor: pointer;
    }
    .m-tab-title-seleted{
      color: #ffffff;
      background: #3778bc;
    }
    .m-tabs-body{
      border: 1px solid #cccccc;
      border-top: none;
    }
    .m-hide{
      display: none;
    }
    h3{
      margin-top: 60px;
    }
  </style>
</head>
<body>
  <h3>标题一显示，其他隐藏</h3>
  <div class="m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title m-tab-title-seleted">标题一</div>
      <div class="m-tab-title">标题二</div>
      <div class="m-tab-title">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel">内容一</div>
      <div class="m-tab-panel m-hide">内容二</div>
      <div class="m-tab-panel m-hide">内容三</div>
    </div>
  </div>
  <h3>标题二显示，其他隐藏</h3>
  <div class="m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title">标题一</div>
      <div class="m-tab-title m-tab-title-seleted">标题二</div>
      <div class="m-tab-title">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel m-hide">内容一</div>
      <div class="m-tab-panel">内容二</div>
      <div class="m-tab-panel m-hide">内容三</div>
    </div>
  </div>
  <h3>标题三显示，其他隐藏</h3>
  <div class="m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title">标题一</div>
      <div class="m-tab-title">标题二</div>
      <div class="m-tab-title m-tab-title-seleted">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel m-hide">内容一</div>
      <div class="m-tab-panel m-hide">内容二</div>
      <div class="m-tab-panel">内容三</div>
    </div>
  </div>
</body>
</html>